<template>
  <!--使用象形柱状图进行温度显示-->
  <div id="temperature-bar" style="height: 30vh; width: 100%; margin: 0 auto;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "TemperatureBar",
  props: ['temperature'],
  watch: {
    temperature() {
      this.initEcharts()
    }
  },
  methods: {
    initEcharts() {
      let myChart = echarts.init(document.getElementById("temperature-bar"))

      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 最高图表上限
      let bodyMax = 35

      // 当前温度
      let temperature = this.temperature

      // 象形柱状图的图像
      let symbol = 'path://M702.506667 508.928a25.344 25.344 0 0 1-9.898667-19.242667V205.013333c0-89.6-74.496-162.346667-166.101333-162.346666-91.562667 0-166.058667 72.789333-166.058667 162.346666v276.608a39.594667 39.594667 0 0 1-13.482667 30.293334A263.978667 263.978667 0 0 0 252.586667 713.813333C252.586667 861.269333 375.466667 981.333333 526.634667 981.333333c151.125333 0 274.048-119.978667 274.048-267.52a264.021333 264.021333 0 0 0-98.133334-204.885333z m-175.872-381.397333c43.946667 0 79.786667 34.730667 79.786666 77.482666v333.696c0 5.034667 2.688 9.813333 6.997334 12.458667l13.312 8.192c54.869333 33.792 87.594667 91.434667 87.594666 154.325333-0.085333 100.736-84.309333 182.698667-187.818666 182.698667-103.552 0-187.733333-81.92-187.733334-182.698667 0-62.762667 32.853333-120.533333 87.765334-154.325333l13.269333-8.192a14.72 14.72 0 0 0 6.997333-12.458667V205.013333c0-42.752 35.84-77.482667 79.786667-77.482666z m-0.298667 110.677333a39.125333 39.125333 0 0 0-39.125333 39.125333v319.530667a117.376 117.376 0 1 0 78.250666 0.085333V277.333333a39.125333 39.125333 0 0 0-39.125333-39.125333zM260.608 160h39.082667a39.125333 39.125333 0 0 1 0 78.208h-39.082667a39.125333 39.125333 0 1 1 0-78.208z m0 117.333333h39.082667a39.125333 39.125333 0 0 1 0 78.208h-39.082667a39.125333 39.125333 0 1 1 0-78.208z'

      let labelSetting = {
        show: true,
        position: 'outside',
        offset: [0, -20],
        color: 'rgb(241,155,154)',
        formatter: function (param) {
          return "当前水温：" + param.value + "℃"
        },
        textStyle: {
          fontSize: 18,
        }
      }

      let option = {
        tooltip: {
        },
        xAxis: {
          data: ['℃'],
          axisTick: {show: false},
          axisLine: {show: false},
          axisLabel: {show: false}
        },
        yAxis: {
          max: bodyMax,
          offset: 20,
          splitLine: {show: false},
          axisLabel: {
            show: true,
            color: "rgb(222,230,231)"
          }
        },
        grid: {
          top: '30%',
          left: 'center',
          height: '50%',
          y2: 0
        },
        markLine: {
          z: -100
        },
        series: [{
          name: '当前温度',
          type: 'pictorialBar',
          symbolClip: true,
          symbolBoundingData: bodyMax,
          label: labelSetting,
          itemStyle: {
            color: 'rgb(224,91,91)'
          },
          data: [{
            value: temperature,
            symbol: symbol
          }],
          z: 10
        }, {
          name: '最高温度',
          type: 'pictorialBar',
          symbolBoundingData: bodyMax,
          animationDuration: 0,
          itemStyle: {
            color: 'rgba(196,244,250,0.8)'
          },
          data: [{
            value: bodyMax,
            symbol: symbol
          }]
        }]
      }

      myChart.setOption(option)
    }
  },
  mounted() {
    this.initEcharts()
  }
}
</script>

<style scoped>

</style>
